<template>
  <div class="home">
    <a-layout-content style="padding: 0 50px">
      <a-breadcrumb style="margin: 16px 0">
        <a-breadcrumb-item>Home</a-breadcrumb-item>
        <a-breadcrumb-item>List</a-breadcrumb-item>
        <a-breadcrumb-item>App</a-breadcrumb-item>
      </a-breadcrumb>
      <a-layout style="padding: 24px 0; background: #fff">
        <a-layout-sider width="200" style="background: #fff">
          <a-menu mode="inline" style="height: 100%" @click="handleClick">
            <a-menu-item key="welcome">
              <MailOutlined />
              <span>欢迎</span>
            </a-menu-item>
            <a-sub-menu v-for="item in level1" :key="item.id">
              <template v-slot:title>
                <span><user-outlined />{{ item.name }}</span>
              </template>
              <a-menu-item v-for="child in item.children" :key="child.id">
                <MailOutlined /><span>{{ child.name }}</span>
              </a-menu-item>
            </a-sub-menu>
          </a-menu>
        </a-layout-sider>
        <a-layout-content :style="{ padding: '0 24px', minHeight: '280px' }">
          <div class="welcome" v-show="isShowWelcome">
            <h1>欢迎使用wiki知识库</h1>
          </div>
          <a-list
            v-show="!isShowWelcome"
            item-layout="vertical"
            size="large"
            :data-source="ebooks"
            :grid="{ gutter: 20, column: 3 }"
          >
            <!-- <template #footer>
              <div>
                <b>ant design vue</b>
                footer part
              </div>
            </template> -->
            <template #renderItem="{ item }">
              <a-list-item key="item.name">
                <template #actions>
                  <span v-for="{ icon, text } in actions" :key="icon">
                    <component :is="icon" style="margin-right: 8px" />
                    {{ text }}
                  </span>
                </template>
                <!-- <template #extra>
                  <img
                    width="272"
                    alt="logo"
                    src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
                  />
                </template> -->
                <a-list-item-meta :description="item.description">
                  <template #title>
                    <a :href="item.href">{{ item.name }}</a>
                  </template>
                  <template #avatar><a-avatar :src="item.avatar" /></template>
                </a-list-item-meta>
                {{ item.content }}
              </a-list-item>
            </template>
          </a-list>
        </a-layout-content>
      </a-layout>
    </a-layout-content>
  </div>
</template>

<script lang="ts">
import { onMounted } from "vue";
import { Options, Vue } from "vue-class-component";
import { defineComponent, ref } from "vue";
import axios from "axios";
import { message } from "ant-design-vue";
import { Tool } from "@/utils/tool";
import {
  StarOutlined,
  LikeOutlined,
  MessageOutlined,
} from "@ant-design/icons-vue";
export default defineComponent({
  name: "HomeView",
  setup() {
    const books = ref();
    const handleQueryEbook = () => {
      axios
        .get("/ebook/getEbooksByPage", {
          params: {
            page: 1,
            size: 1000,
            category2Id: category2id,
          },
        })
        .then((resp) => {
          ebooks.value = resp.data.content.list;
          books.value = resp.data.content.list;
        });
    };

    const isShowWelcome = ref(true);
    let category2id = 0;
    // 触发点击菜单
    const handleClick = (value: any) => {
      // console.log("menu click",value)
      if (value.key === "welcome") {
        isShowWelcome.value = true;
      } else {
        category2id = value.key;
        isShowWelcome.value = false;
        handleQueryEbook();
      }
    };
    //分类相关
    const level1 = ref();
    let categorys: any;

    const handleQueryCategory = () => {
      axios.get("/category/allList").then((resp) => {
        const data = resp.data;
        categorys = data.content;

        if (data.success) {
          console.log(data.content);
          console.log("原始数组：", data.content);

          level1.value = [];
          level1.value = Tool.array2Tree(data.content, 0);
          console.log("树形结构：", level1);
        } else {
          message.error(data.message);
        }
      });
    };

    const ebooks = ref();
    const listData: Record<string, string>[] = [];
    for (let i = 0; i < 23; i++) {
      listData.push({
        href: "https://www.antdv.com/",
        title: `ant design vue part ${i}`,
        avatar: "https://joeschmoe.io/api/v1/random",
        description:
          "Ant Design, a design language for background applications, is refined by Ant UED Team.",
        content:
          "We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.",
      });
    }
    const actions: Record<string, any>[] = [
      { icon: StarOutlined, text: "156" },
      { icon: LikeOutlined, text: "156" },
      { icon: MessageOutlined, text: "2" },
    ];
    onMounted(() => {
      handleQueryCategory();
      axios.get("/ebook/getEbookListByPage", {
        params: {
          page: 1,
          size: 1000,
          category2_id: category2id,
        },
      });
    });
    return {
      ebooks,
      listData,
      actions,
      level1,
      categorys,
      handleQueryCategory,
      handleClick,
      isShowWelcome,
      books,
      handleQueryEbook,
    };
  },
});
</script>

<style>
.ant-avatar {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 8%;
  margin: 5px 0;
}
</style>
